/* ============ GENEL ============ */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --mor:#5b21b6; --mor-acik:#7c3aed; --lacivert:#1e293b;
  --gri:#64748b; --cizgi:#e2e8f0; --zemin:#f8fafc;
}
body { font-family:'Segoe UI', system-ui, sans-serif; color:var(--lacivert); background:#fff; }
[hidden] { display:none !important; }
h1,h2,h3 { line-height:1.25; }
button { cursor:pointer; font-family:inherit; }
input, select, textarea { font-family:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--cizgi); border-radius:8px; width:100%; background:#fff; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--mor-acik); border-color:transparent; }
label { display:block; font-size:12.5px; font-weight:600; color:var(--gri); margin-bottom:2px; }
label input, label select, label textarea { margin-top:4px; font-weight:400; color:var(--lacivert); }

.btn { border:none; border-radius:9px; padding:9px 16px; font-size:14px; font-weight:600; transition:.15s; }
.btn-primary { background:linear-gradient(135deg,var(--mor),var(--mor-acik)); color:#fff; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-ghost { background:#fff; border:1.5px solid var(--cizgi); color:var(--lacivert); }
.btn-ghost:hover { border-color:var(--mor-acik); color:var(--mor-acik); }
.btn-lg { padding:13px 24px; font-size:15.5px; border-radius:11px; }
.btn-block { width:100%; }
.btn-add { background:#f1f5f9; border:1.5px dashed #cbd5e1; color:var(--gri); width:100%; padding:10px; }
.btn-add:hover { border-color:var(--mor-acik); color:var(--mor-acik); }
.btn-danger { background:#fff; border:1.5px solid #fecaca; color:#dc2626; }
.btn-mini { font-size:12px; padding:4px 10px; background:#f1f5f9; border:1px solid var(--cizgi); border-radius:6px; margin-top:6px; }

/* ============ LANDING ============ */
.topbar { position:sticky; top:0; background:#fffdf9; border-bottom:1px solid var(--cizgi); z-index:50; background:#fff; }
.topbar-in { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; }
.logo { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.logo span { color:var(--mor-acik); }
.topnav { display:flex; gap:22px; }
.topnav a { text-decoration:none; color:var(--gri); font-size:14.5px; font-weight:500; }
.topnav a:hover { color:var(--mor-acik); }

.hero { background:linear-gradient(160deg,#f5f3ff 0%,#fff 60%); overflow:hidden; }
.hero-in { max-width:1100px; margin:0 auto; padding:70px 20px 80px; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.hero-badge { display:inline-block; background:#ede9fe; color:var(--mor); font-size:13px; font-weight:600; padding:6px 14px; border-radius:99px; margin-bottom:18px; }
.hero h1 { font-size:46px; letter-spacing:-1.2px; margin-bottom:16px; }
.hero h1 em { font-style:normal; color:var(--mor-acik); }
.hero p { font-size:17px; color:var(--gri); line-height:1.65; max-width:480px; margin-bottom:26px; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
.hero-note { margin-top:14px; font-size:13px; color:#94a3b8; }
.hero-visual { position:relative; height:340px; }
.hero-cv { position:absolute; width:190px; height:265px; border-radius:10px; box-shadow:0 20px 50px rgba(30,41,59,.18); }
.hero-cv-1 { background:linear-gradient(180deg,#1e3a8a 0 30%, #fff 30%); left:0; top:40px; transform:rotate(-7deg); }
.hero-cv-2 { background:linear-gradient(90deg,#0f766e 0 32%, #fff 32%); left:120px; top:10px; z-index:2; }
.hero-cv-3 { background:linear-gradient(180deg,#e11d48 0 18%, #fff 18%); left:245px; top:55px; transform:rotate(8deg); }

.landing-sec { max-width:1100px; margin:0 auto; padding:70px 20px; text-align:center; }
.landing-sec h2 { font-size:32px; letter-spacing:-.6px; margin-bottom:14px; }
.landing-sec-alt { max-width:none; background:var(--zemin); }
.landing-sec-alt > * { max-width:1100px; margin-left:auto; margin-right:auto; }
.sec-sub { color:var(--gri); margin-bottom:34px; }
.steps3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; }
.step3 { background:#fff; border:1px solid var(--cizgi); border-radius:16px; padding:28px 22px; text-align:left; }
.step3-no { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--mor),var(--mor-acik)); color:#fff; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.step3 h3 { font-size:17px; margin-bottom:8px; }
.step3 p { font-size:14px; color:var(--gri); line-height:1.55; }

.tpl-showcase { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:34px; }
.tpl-show-card { background:#fff; border:1px solid var(--cizgi); border-radius:12px; padding:12px; cursor:pointer; transition:.15s; }
.tpl-show-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(30,41,59,.1); }
.tpl-mini { height:120px; border-radius:7px; margin-bottom:10px; border:1px solid var(--cizgi); }
.tpl-show-card b { font-size:13.5px; display:block; }
.tpl-show-card small { font-size:11.5px; color:var(--gri); }

.price-card { max-width:420px; margin:30px auto 0; background:#fff; border:2px solid #ede9fe; border-radius:20px; padding:36px; box-shadow:0 18px 44px rgba(91,33,182,.09); }
.price-big { font-size:52px; font-weight:800; color:var(--mor); }
.price-per { color:var(--gri); margin-bottom:20px; }
.price-card ul { list-style:none; text-align:left; margin:0 0 24px; }
.price-card li { padding:7px 0; font-size:14.5px; border-bottom:1px dashed var(--cizgi); }
.footer { text-align:center; padding:34px; color:#94a3b8; font-size:13px; border-top:1px solid var(--cizgi); }
.footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin-bottom:12px; }
.footer-links a { color:#64748b; text-decoration:none; font-size:13px; }
.footer-links a:hover { color:var(--mor-acik); }
.sozlesme-onay { display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--gri); font-weight:400; margin:2px 0 12px; cursor:pointer; }
.sozlesme-onay input { width:auto; margin-top:2px; cursor:pointer; }
.sozlesme-onay a { color:var(--mor-acik); }

/* ============ BUILDER ============ */
.app { position:fixed; inset:0; background:var(--zemin); z-index:100; display:flex; flex-direction:column; }
.app-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 18px; background:#fff; border-bottom:1px solid var(--cizgi); }
.app-head-mid { font-size:12.5px; color:#94a3b8; }
.app-head-btns { display:flex; gap:10px; }
.app-body { flex:1; display:grid; grid-template-columns:430px 1fr; overflow:hidden; }

.panel-form { overflow-y:auto; padding:18px; background:#fff; border-right:1px solid var(--cizgi); }
.form-sec { border:1px solid var(--cizgi); border-radius:14px; padding:16px; margin-bottom:14px; background:#fff; }
.form-sec h3 { font-size:15px; margin-bottom:10px; }
.form-sec .hint { font-size:12px; color:#94a3b8; margin:-4px 0 10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-sec-son { display:flex; gap:10px; border:none; padding:4px 2px 30px; }
.foto-label { margin-top:12px; }
textarea { resize:vertical; }

.madde { border:1px solid var(--cizgi); border-radius:10px; padding:12px; margin-bottom:10px; background:#fafbfc; position:relative; }
.madde .grid2 { margin-bottom:8px; }
.madde textarea, .madde input { background:#fff; }
.madde-sil { position:absolute; top:8px; right:8px; background:#fee2e2; color:#dc2626; border:none; border-radius:6px; width:26px; height:26px; font-size:13px; }

.tpl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-height:430px; overflow-y:auto; padding:6px 2px; }
.tpl-card { border:2px solid var(--cizgi); border-radius:10px; padding:8px; cursor:pointer; text-align:center; position:relative; transition:.12s; background:#fff; }
.tpl-card:hover { border-color:#c4b5fd; }
.tpl-card.secili { border-color:var(--mor-acik); box-shadow:0 0 0 3px #ede9fe; }
.tpl-card .tpl-mini { height:72px; margin-bottom:6px; }
.tpl-card b { font-size:12px; display:block; }
.tpl-card small { display:block; font-size:9.5px; color:#94a3b8; line-height:1.25; margin-top:1px; }
.tpl-oneri { position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:#16a34a; color:#fff; font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:99px; white-space:nowrap; z-index:2; }

/* renk seçimi */
.renk-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.renk-sw { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1.5px #d1d5db; transition:.1s; }
.renk-sw:hover { transform:scale(1.15); }
.renk-sw.secili { box-shadow:0 0 0 3px var(--mor-acik); }
.renk-oto { padding:5px 12px; font-size:12px; font-weight:600; border-radius:99px; border:1.5px solid var(--cizgi); cursor:pointer; background:#fff; color:var(--gri); }
.renk-oto.secili { border-color:var(--mor-acik); color:var(--mor-acik); }
.renk-ozel { display:inline-flex; align-items:center; gap:4px; cursor:pointer; font-size:16px; margin-bottom:0; }
.renk-ozel input[type=color] { width:30px; height:30px; padding:0; border:none; border-radius:6px; cursor:pointer; background:none; }

.panel-preview { display:flex; flex-direction:column; overflow:hidden; }
.preview-tools { display:flex; justify-content:space-between; align-items:center; padding:10px 22px 0; font-size:13px; color:var(--gri); }
.preview-tag { background:#dcfce7; color:#15803d; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:99px; }
.preview-scroll { flex:1; overflow:auto; padding:16px 22px; }
.cv-scale-wrap { transform-origin:top center; margin:0 auto; width:794px; }
.preview-foot { padding:12px 22px; background:#fff; border-top:1px solid var(--cizgi); }

/* ============ TAM EKRAN ÖNİZLEME ============ */
.fullpreview { position:fixed; inset:0; background:#334155; z-index:200; display:flex; flex-direction:column; }
.fullpreview-bar { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:#1e293b; color:#e2e8f0; font-size:14px; }
.fullpreview-bar > div { display:flex; gap:10px; }
.fullpreview-body { flex:1; overflow:auto; padding:26px; display:flex; justify-content:center; }

/* ============ ÖDEME MODALI ============ */
.modal-back { position:fixed; inset:0; background:rgba(15,23,42,.62); z-index:300; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal { background:#fff; border-radius:18px; width:440px; max-width:100%; max-height:92vh; overflow-y:auto; padding:22px; }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.modal-head h3 { font-size:18px; }
.modal-x { background:#f1f5f9; border:none; width:30px; height:30px; border-radius:8px; font-size:14px; }
.odeme-ozet { background:var(--zemin); border:1px solid var(--cizgi); border-radius:12px; padding:14px; margin-bottom:12px; }
.odeme-satir { display:flex; justify-content:space-between; font-size:14px; padding:3px 0; }
.odeme-kdv { color:#94a3b8; font-size:12.5px; }
.odeme-toplam { font-weight:800; font-size:16px; border-top:1px solid var(--cizgi); margin-top:6px; padding-top:8px; }
.demo-uyari { background:#fef9c3; border:1px solid #fde047; color:#854d0e; font-size:12.5px; padding:10px 12px; border-radius:10px; margin-bottom:14px; line-height:1.5; }
.kart-form label { margin-bottom:10px; }
.odeme-guven { text-align:center; font-size:12px; color:#94a3b8; margin-top:10px; }
.spinner { width:46px; height:46px; border:5px solid #ede9fe; border-top-color:var(--mor-acik); border-radius:50%; margin:34px auto 18px; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.odeme-bekle { text-align:center; color:var(--gri); padding-bottom:30px; }
.odeme-ok { width:64px; height:64px; border-radius:50%; background:#16a34a; color:#fff; font-size:34px; display:flex; align-items:center; justify-content:center; margin:22px auto 14px; }
.odeme-ok-baslik { text-align:center; margin-bottom:8px; }
.odeme-ok-metin { text-align:center; color:var(--gri); font-size:14px; line-height:1.6; margin-bottom:18px; }

/* ==================================================== */
/* ================ CV SAYFASI (A4) =================== */
/* Renk sistemi: --a = vurgu rengi (JS'ten şablon varsayılanı ya da kullanıcı seçimi) */
/* ==================================================== */
.cv-page { --a:#1e3a8a; width:794px; min-height:1123px; background:#fff; box-shadow:0 8px 30px rgba(15,23,42,.16); margin:0 auto; overflow:hidden; color:#1e293b; }
.cv-page, .cv-page * { line-height:1.45; }
.cv-bos { padding:80px 40px; text-align:center; color:#94a3b8; font-size:15px; }

.f-serif { font-family:Georgia,'Times New Roman',serif; }

.cv-ad { font-size:29px; font-weight:800; letter-spacing:-.5px; color:#0f172a; }
.ad-buyuk .cv-ad { text-transform:uppercase; letter-spacing:2.5px; font-size:25px; }
.ad-renk .cv-ad { color:var(--a); }
.cv-unvan { font-size:15px; margin-top:2px; color:var(--a); font-weight:600; }
.f-serif .cv-unvan { font-style:italic; font-weight:400; }

.cv-h2 { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1.8px; margin:22px 0 10px; color:var(--a); }
.b-cizgi .cv-h2 { border-bottom:1px solid #d1d5db; padding-bottom:4px; }
.b-kalin .cv-h2 { border-bottom:2px solid var(--a); padding-bottom:4px; }
.b-bar .cv-h2 { border-left:4px solid var(--a); padding-left:9px; }
.b-duz .cv-h2 { letter-spacing:2.6px; font-size:12.5px; }

.cv-madde { margin-bottom:13px; }
.cv-madde-ust { display:flex; justify-content:space-between; gap:12px; }
.cv-poz { font-weight:700; font-size:14.5px; }
.cv-kurum { font-size:13.5px; color:#64748b; }
.cv-tarih { font-size:12.5px; white-space:nowrap; color:#64748b; }
.cv-acik { font-size:12.8px; margin-top:3px; }
.cv-chips { display:flex; flex-wrap:wrap; gap:7px; }
.cv-chip { font-size:12px; padding:4px 11px; border-radius:99px; background:color-mix(in srgb, var(--a) 10%, white); color:color-mix(in srgb, var(--a) 75%, black); }
.b-duz .cv-chip, .b-cizgi .cv-chip { border-radius:6px; border:1px solid color-mix(in srgb, var(--a) 25%, white); }
.cv-dil { display:flex; justify-content:space-between; font-size:13px; padding:3px 0; }
.cv-foto { width:96px; height:96px; border-radius:50%; object-fit:cover; }
.cv-iletisim div { font-size:12.5px; margin-bottom:5px; word-break:break-word; }

/* ---- TEK KOLON yerleşimi ---- */
.cv-single { padding:46px 52px; }
.cv-single .cv-ust { display:flex; gap:22px; align-items:center; border-bottom:3px solid var(--a); padding-bottom:18px; }
.b-duz .cv-single .cv-ust, .lay-single.b-duz .cv-ust { border-bottom-width:1.5px; }
.cv-single .cv-iletisim { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:8px; }
.cv-single .cv-iletisim div { margin-bottom:0; }

/* ---- KENAR ÇUBUKLU yerleşim ---- */
.cv-sidebar { display:flex; min-height:1123px; }
.side-sag .cv-sidebar { flex-direction:row-reverse; }
.cv-side { width:255px; padding:38px 26px; flex-shrink:0; }
.cv-main { flex:1; padding:38px 34px; }
.cv-side .cv-foto { display:block; margin:0 auto 20px; width:118px; height:118px; }
.cv-side .cv-h2 { font-size:12.5px; }
.cv-sidebar .cv-ad { font-size:27px; }
.cv-sidebar .cv-unvan { margin:3px 0 6px; }

/* kenar çubuğu stilleri */
.s-dolu .cv-side { background:var(--a); color:rgba(255,255,255,.93); }
.s-dolu .cv-side .cv-h2 { color:rgba(255,255,255,.78); border-color:rgba(255,255,255,.35) !important; }
.s-dolu .cv-side .cv-chip { background:rgba(255,255,255,.16); color:#fff; border:none; }
.s-dolu .cv-side .cv-foto { border:4px solid rgba(255,255,255,.4); }
.s-dolu .cv-side .cv-sos { border-color:rgba(255,255,255,.6); }

.s-acik .cv-side { background:color-mix(in srgb, var(--a) 9%, white); }
.s-acik .cv-side .cv-foto { border:4px solid #fff; box-shadow:0 2px 10px rgba(15,23,42,.12); }

.s-cizgi .cv-side { background:#fff; border-right:1.5px solid #e5e7eb; }
.side-sag.s-cizgi .cv-side { border-right:none; border-left:1.5px solid #e5e7eb; }
.s-cizgi .cv-side .cv-foto { border:3px solid var(--a); }

/* ---- BANT yerleşimi (renkli üst şerit) ---- */
.lay-band .cv-band-ust { background:var(--a); color:#fff; padding:36px 52px; display:flex; gap:24px; align-items:center; }
.lay-band .cv-ad { color:#fff; }
.lay-band .cv-unvan { color:rgba(255,255,255,.85); }
.lay-band .cv-band-ust .cv-iletisim { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:9px; color:rgba(255,255,255,.92); }
.lay-band .cv-band-ust .cv-iletisim div { margin-bottom:0; }
.lay-band .cv-band-ust .cv-sos { border-color:rgba(255,255,255,.6); }
.lay-band .cv-foto { border:3px solid rgba(255,255,255,.45); }
.lay-band .cv-band-govde { padding:26px 52px 40px; }

/* ============ YAZDIRMA (PDF) ============ */
.cv-sos { display:inline-block; font-weight:800; font-size:10.5px; width:17px; text-align:center; border:1px solid currentColor; border-radius:4px; padding:0 1px; margin-right:2px; }

#printAlan { display:none; }
@page { size:A4; margin:0; }
@media print {
  body > *:not(#printAlan) { display:none !important; }
  #printAlan { display:block !important; }
  #printAlan .cv-page { width:210mm; min-height:297mm; box-shadow:none; margin:0; }
  #printAlan .cv-sidebar { min-height:297mm; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

@media (max-width:900px) {
  .hero-in { grid-template-columns:1fr; }
  .hero-visual { display:none; }
  .steps3, .tpl-showcase { grid-template-columns:1fr 1fr; }
  .app-body { grid-template-columns:1fr; }
  .panel-preview { display:none; }
}