/* TemaDepo — Canlı Demo Galerisi (v16 tasarımının gerçek koda taşınmış hali, 2026-06-21) */

:root{
  --bg:#f8f7fc;
  --bg-soft:#efedf7;
  --white:#ffffff;
  --ink:#13141a;
  --muted:#5d6072;
  --muted-soft:#8a8da0;
  --line:#e4e5ec;
  --indigo:#6c4fe0;
  --indigo-deep:#5538c9;
  --coral:#ff6f8e;
  --green:#1faa72;
  --radius:14px;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg) radial-gradient(circle, rgba(108,79,224,.16) 1.4px, transparent 1.4px) 0 0/24px 24px; color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--indigo); outline-offset:2px;}

/* ---------- TOPBAR ---------- */
.topbar{border-bottom:1px solid var(--line); background:var(--white);}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0; flex-wrap:wrap; gap:10px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color:var(--ink);}
.brand .cube{width:30px; height:30px;}
.back{font-size:13.5px; font-weight:700; color:var(--muted); border:1px solid var(--line); padding:9px 16px; border-radius:8px; transition:.15s; background:var(--white);}
.back:hover{border-color:var(--ink); color:var(--ink);}
.back-group{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.services-link{font-size:12.5px; font-weight:700; color:var(--indigo-deep); text-decoration:none; background:var(--bg-soft); border:1px solid var(--line); padding:9px 16px; border-radius:8px; transition:.15s; white-space:nowrap;}
.services-link:hover{border-color:var(--indigo); background:#ece7fb;}

/* ---------- HERO ---------- */
.hero{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; padding:60px 0 50px;}
.hero-l{min-width:0;}
h1{font-family:'Inter',sans-serif; font-weight:900; font-size:clamp(32px,4.2vw,46px); line-height:1.12; letter-spacing:-.02em; margin:0 0 16px; color:var(--ink);}
.hero-l p{font-size:16px; color:var(--muted); max-width:480px; line-height:1.6; margin:0 0 28px; font-weight:500;}

.search-form{position:relative;}
.search-box{display:flex; align-items:stretch; gap:0; border:1.5px solid var(--line); border-radius:10px; overflow:hidden; background:var(--white); max-width:520px;}
.search-box input{border:none; outline:none; padding:15px 14px; font-size:14.5px; flex:1; min-width:0; font-family:'Inter',sans-serif; color:var(--ink);}
.search-box input::placeholder{color:var(--muted-soft);}
.search-clear{flex-shrink:0; border:none; border-left:1px solid var(--line); background:var(--bg-soft); color:var(--muted); width:42px; cursor:pointer; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; transition:.15s;}
.search-clear:hover{background:#fde9e9; color:#dc2626;}
.search-box button[type=submit]{flex-shrink:0; border:none; background:var(--indigo); color:#fff; font-weight:700; font-size:14px; padding:0 22px; cursor:pointer; display:flex; align-items:center; gap:7px; transition:.15s;}
.search-box button[type=submit]:hover{background:var(--indigo-deep);}

.search-suggest{display:none; position:absolute; top:calc(100% + 8px); left:0; width:100%; max-width:520px; background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 48px -16px rgba(20,20,30,.22); z-index:30; overflow:hidden; padding:6px;}
.search-suggest.open{display:block;}
.search-suggest__item{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; padding:12px 14px; border:none; background:none; cursor:pointer; font-size:14px; font-weight:700; color:var(--ink); border-radius:9px; transition:.12s;}
.search-suggest__item:hover{background:var(--bg-soft); padding-left:18px;}
.ss-live{font-size:10px; font-weight:800; color:var(--green); background:#e7f7ef; padding:3px 9px; border-radius:999px; letter-spacing:.02em;}
.ss-soon{font-size:10px; font-weight:700; color:var(--muted-soft); background:var(--bg-soft); padding:3px 9px; border-radius:999px;}
.search-suggest__empty{padding:16px 14px; font-size:13px; color:var(--muted-soft); font-weight:600; text-align:center;}

.pills{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; align-items:center;}
.pill{border:1px solid var(--line); background:var(--white); color:var(--muted); padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:700; cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:6px;}
.pill:hover{border-color:var(--indigo); color:var(--indigo);}
.pill.active{background:var(--ink); color:#fff; border-color:var(--ink);}

.more-wrap{display:contents;}
.more-toggle{display:none;}
.more-group{display:contents;}

/* ---------- HERO SAĞ — öne çıkan tema (TAMAMEN panelden yönetilir) ---------- */
.hero-r{padding-top:18px;}
.featured-badge{display:inline-block; background:linear-gradient(135deg,var(--coral),#ff9a5a); color:#fff; font-size:12px; font-weight:800; padding:7px 14px; border-radius:999px; box-shadow:0 12px 24px -8px rgba(255,111,142,.5); letter-spacing:.02em; margin-bottom:14px;}
.featured-img-link{display:block; position:relative; height:300px; cursor:pointer;}
.stack-card{position:absolute; border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -25px rgba(20,20,30,.18); border:1px solid var(--line); transition:.2s;}
.featured-img-link:hover .stack-card.main{box-shadow:0 36px 70px -25px rgba(108,79,224,.35);}
.stack-card.main{width:78%; top:0; left:8%; z-index:3; height:100%; background:var(--bg-soft);}
.stack-card.main img{width:100%; height:100%; object-fit:cover; display:block;}
.stack-card.tag{position:absolute; z-index:4; background:#fff; border-radius:10px; padding:10px 14px; box-shadow:0 16px 30px -10px rgba(20,20,30,.2); display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800;}
.stack-card.tag.t1{top:14px; left:0;}
.stack-card.tag.t2{bottom:18px; right:2%;}
.stack-card .dot{width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0;}

.featured-actions{display:flex; gap:8px; margin-top:16px;}
.fa-btn{flex:1; border:none; border-radius:9px; padding:12px 10px; font-weight:700; font-size:13px; cursor:pointer; text-align:center; text-decoration:none; transition:.15s;}
.fa-btn.demo{background:var(--indigo); color:#fff;}
.fa-btn.demo:hover{background:var(--indigo-deep);}
.fa-btn.buy{background:#1fb855; color:#fff;}
.fa-btn.buy:hover{background:#178a40;}
.fa-btn.spec{background:var(--white); color:var(--ink); border:1px solid var(--line);}
.fa-btn.spec:hover{border-color:var(--indigo); color:var(--indigo-deep);}

/* ---------- SONUÇ SAYISI ---------- */
.result-count{font-size:13px; color:var(--muted-soft); font-weight:600; margin:36px 0 16px;}

/* ---------- GRID ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:24px;}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px 22px; display:flex; flex-direction:column; transition:.15s; position:relative;}
.card:hover{border-color:var(--indigo); box-shadow:0 20px 40px -28px rgba(108,79,224,.25);}
.card::before{content:''; position:absolute; top:0; left:0; height:3px; width:0; z-index:6; border-radius:14px 14px 0 0; background:linear-gradient(90deg,var(--indigo),var(--coral)); transition:width .5s ease;}
.card:hover::before{width:100%;}

.card-icon{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:#fff;}
.card.cat-wp .card-icon{background:linear-gradient(135deg,var(--indigo),#9d6dff);}
.card.cat-html .card-icon{background:linear-gradient(135deg,var(--coral),#ff9eb3);}
.card.cat-php .card-icon{background:linear-gradient(135deg,#1faa72,#3ddc97);}
.card.cat-sektorel .card-icon{background:linear-gradient(135deg,#d9a256,#f0c27b);}

.update-tag{font-size:10.5px; color:var(--muted-soft); font-weight:600; display:block; margin-bottom:4px;}
.card h3{margin:0 0 6px; font-size:18px; font-weight:800; color:var(--ink);}
.card p{margin:0 0 16px; font-size:13.5px; color:var(--muted); line-height:1.55; font-weight:500; flex:1;}

.card-shot{border-radius:10px; overflow:hidden; border:1px solid var(--line); height:130px; position:relative; background:var(--bg-soft); margin-bottom:16px;}
.card-shot img{width:100%; height:100%; object-fit:cover; display:block;}
.card-shot .live-pill{position:absolute; top:9px; right:9px; background:#fff; border-radius:999px; padding:4px 10px; font-size:10.5px; font-weight:800; display:flex; align-items:center; gap:5px; box-shadow:0 6px 14px -6px rgba(0,0,0,.2);}
.card-shot .live-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--green);}

.card-links{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.card-links button{font-size:12.5px; font-weight:700; padding:9px 13px; border-radius:8px; border:1px solid var(--line); background:var(--bg-soft); color:var(--ink); cursor:pointer; text-align:center; flex:1; white-space:nowrap;}
.card-links button:hover{border-color:var(--indigo); color:var(--indigo-deep);}
.card-links .price-chip{flex:1; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--indigo-deep); background:var(--bg-soft); border-radius:8px; font-size:12.5px; position:relative; cursor:help;}
.price-chip[data-tip]:hover::after{content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; font-size:11px; font-weight:600; padding:7px 11px; border-radius:7px; white-space:nowrap; z-index:10; box-shadow:0 10px 20px -6px rgba(0,0,0,.3);}
.price-chip[data-tip]:hover::before{content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--ink); margin-bottom:-2px; z-index:10;}
.card-links span.soon{color:var(--muted-soft); font-weight:600; flex:1; text-align:center; padding:9px 0; font-size:12.5px;}

.cta-row{display:flex; gap:8px; margin-top:auto;}
.card-cta{flex:1; background:var(--indigo); color:#fff; border:none; border-radius:9px; padding:13px 10px; font-weight:700; font-size:13.5px; cursor:pointer; transition:.15s; text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:5px;}
.card-cta:hover{background:var(--indigo-deep); transform:translateY(-1px);}
.card-cta.disabled{background:var(--bg-soft); color:var(--muted-soft); cursor:default;}
.card-cta.disabled:hover{background:var(--bg-soft); transform:none;}
.card-cta.buy{background:#1fb855;}
.card-cta.buy:hover{background:#178a40;}

/* ---------- SAYFALAMA — gerçek <a href> linkleri, sunucu taraflı ---------- */
.pager{display:flex; align-items:center; justify-content:center; gap:14px; margin:8px 0 50px;}
.pager-btn{border:1px solid var(--line); background:var(--white); color:var(--ink); padding:10px 18px; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; transition:.15s; text-decoration:none;}
.pager-btn:hover{border-color:var(--indigo); color:var(--indigo-deep);}
.pager-btn[disabled]{opacity:.35; pointer-events:none;}
.pager-nums{display:flex; gap:6px;}
.pager-num{width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:var(--white); color:var(--muted); font-weight:700; font-size:13px; cursor:pointer; transition:.15s; text-decoration:none; display:flex; align-items:center; justify-content:center;}
.pager-num:hover{border-color:var(--indigo);}
.pager-num.active{background:var(--indigo); color:#fff; border-color:var(--indigo);}

.empty-msg{text-align:center; padding:60px 0; color:var(--muted-soft); font-size:14px; font-weight:600;}

/* ---------- ABOUT STRIP ---------- */
.about-strip{margin:10px 0 40px; border-top:1px solid var(--line); padding-top:22px;}
.about-strip p{font-size:13px; color:var(--muted-soft); line-height:1.7; margin:0; font-weight:500; text-align:justify; max-width:none;}
.about-strip a{color:var(--indigo-deep); font-weight:700; text-decoration:underline;}

footer{margin-top:10px; padding:22px 0 50px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted-soft); flex-wrap:wrap; gap:10px; font-weight:600;}

/* ---------- STICKY MİNİ-BAR ---------- */
.mini-bar{position:fixed; top:0; left:0; right:0; z-index:500; background:var(--white); border-bottom:1px solid var(--line); box-shadow:0 10px 30px -15px rgba(0,0,0,.15); padding:12px 0; transform:translateY(-110%); transition:transform .25s ease;}
.mini-bar.show{transform:translateY(0);}
.mini-bar__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.mini-bar__name{font-weight:800; font-size:14px; color:var(--ink);}
.mini-bar__actions{display:flex; gap:8px;}

/* ---------- TEKNİK ÖZELLİKLER MODALI ---------- */
.spec-modal{position:fixed; inset:0; z-index:1000; display:none;}
.spec-modal.open{display:block;}
.spec-modal__backdrop{position:absolute; inset:0; background:rgba(19,20,26,.55);}
.spec-modal__box{position:relative; max-width:440px; margin:8vh auto 0; background:var(--white); border-radius:18px; padding:28px 26px; box-shadow:0 40px 80px -20px rgba(0,0,0,.4); max-height:80vh; overflow-y:auto;}
.spec-modal__close{position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:none; background:var(--bg-soft); font-size:18px; cursor:pointer; color:var(--muted);}
.spec-modal__close:hover{background:var(--line);}
.spec-modal h3{margin:0 0 18px; font-size:19px; font-weight:800; padding-right:30px;}
.spec-list{display:flex; flex-direction:column;}
.spec-row{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.spec-row:last-child{border-bottom:none;}
.spec-row span{color:var(--muted); font-weight:600;}
.spec-row b{color:var(--ink); font-weight:800; text-align:right;}

/* ---------- DETAY SAYFASI (tema.php) ---------- */
.detail-crumb{font-size:13px; color:var(--muted-soft); font-weight:600; margin:24px 0 20px;}
.detail-crumb a{color:var(--indigo-deep); font-weight:700;}
.detail-head{display:flex; gap:18px; align-items:flex-start; margin-bottom:20px;}
.detail-icon{width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;}
.detail-icon.cat-wp{background:linear-gradient(135deg,var(--indigo),#9d6dff);}
.detail-icon.cat-html{background:linear-gradient(135deg,var(--coral),#ff9eb3);}
.detail-icon.cat-php{background:linear-gradient(135deg,#1faa72,#3ddc97);}
.detail-icon.cat-sektorel{background:linear-gradient(135deg,#d9a256,#f0c27b);}
.detail-badges{display:flex; gap:8px; margin-bottom:10px;}
.detail-badges .live-pill{display:inline-flex;}
.detail-titles h1{font-size:28px; margin:0 0 8px;}
.detail-tagline{font-size:14.5px; color:var(--muted); margin:0; max-width:560px; line-height:1.55; font-weight:500;}
.detail-ctas{display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap;}
.detail-ctas .fa-btn{flex:none; padding:13px 22px;}
.detail-body{display:grid; grid-template-columns:1.3fr 1fr; gap:50px; margin-bottom:40px;}
.detail-col h3{font-size:15px; font-weight:800; color:var(--ink); margin:28px 0 12px;}
.detail-col h3:first-child{margin-top:0;}
.detail-p{font-size:14px; color:var(--muted); line-height:1.65; margin:0; font-weight:500;}
.detail-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.detail-list li{display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--muted); font-weight:500;}
.detail-list li svg{color:var(--green); flex-shrink:0; margin-top:1px;}
.tech-tags{display:flex; gap:7px; flex-wrap:wrap;}
.spec-box{background:var(--bg-soft); border-radius:12px; padding:6px 16px;}
.spec-box .spec-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.spec-box .spec-row:last-child{border-bottom:none;}
.spec-box .spec-row span{color:var(--muted); font-weight:600;}
.spec-box .spec-row b{color:var(--ink); font-weight:800;}
.shot-strip{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.shot-thumb{height:90px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--muted-soft); font-size:11px; font-weight:600;}
.shot-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

@media (max-width:900px){ .detail-body{grid-template-columns:1fr;} }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .hero{grid-template-columns:1fr;}
  .featured-img-link{height:200px;}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr;}
  .wrap{padding:0 18px;}
  h1{font-size:28px;}
  .featured-img-link{height:170px;}
  .stack-card.tag{font-size:10px; padding:7px 10px;}
  .featured-actions{flex-wrap:wrap;}
  .more-wrap{display:block; position:relative;}
  .more-toggle{display:inline-flex;}
  .more-group{display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:20; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:8px; box-shadow:0 16px 32px -12px rgba(0,0,0,.2); flex-direction:column; gap:6px; min-width:160px;}
  .more-group.open{display:flex;}
  .more-group .pill{width:100%; justify-content:flex-start;}
}

/* ========================================================== */
/* DETAY SAYFASI v2 (tema.php) — 2026-06-21                    */
/* ========================================================== */

/* ---------- breadcrumb + kategori dropdown tek satırda ---------- */
.crumb-row{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:22px 0 26px; flex-wrap:wrap;}
.crumb{font-size:13px; color:var(--muted-soft); font-weight:600;}
.crumb a{color:var(--indigo-deep); font-weight:700;}

.cat-nav{display:flex; gap:8px; flex-wrap:wrap;}
.cat-drop{position:relative;}
.cat-drop__btn{display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:800; border:1.5px solid transparent; cursor:pointer; transition:.15s;}
.cat-drop__btn:hover{filter:brightness(.96);}
.cat-drop.all .cat-drop__btn{background:linear-gradient(135deg,var(--indigo),var(--coral)); color:#fff; box-shadow:0 10px 20px -8px rgba(108,79,224,.4);}
.cat-drop.wp .cat-drop__btn{background:#ece7fb; color:var(--indigo-deep); border-color:#d8cdf5;}
.cat-drop.html .cat-drop__btn{background:#fde9e9; color:#c2425a; border-color:#f7cdd4;}
.cat-drop.php .cat-drop__btn{background:#e3f5ef; color:#178a5c; border-color:#c5ebd9;}
.cat-drop.sektorel .cat-drop__btn{background:#fdf1de; color:#a8743a; border-color:#f4ddb0;}
.cat-drop__menu{display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:240px; background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 48px -16px rgba(20,20,30,.25); padding:6px; z-index:50;}
.cat-drop__menu.open{display:block;}
.cat-drop__item{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 12px; border-radius:9px; font-size:13px; font-weight:700; color:var(--ink); text-decoration:none;}
.cat-drop__item:hover{background:var(--bg-soft);}
.cat-drop__item.is-current{background:var(--bg-soft); cursor:default;}
.cat-drop__item .tag-live{font-size:9.5px; font-weight:800; color:var(--green); background:#e7f7ef; padding:2px 7px; border-radius:999px;}
.cat-drop__item .tag-soon{font-size:9.5px; font-weight:700; color:var(--muted-soft); background:var(--bg-soft); padding:2px 7px; border-radius:999px;}
.cat-drop__item.disabled{color:var(--muted-soft); cursor:default;}
.cat-drop__empty{padding:14px 12px; font-size:12.5px; color:var(--muted-soft); font-weight:600; text-align:center;}

/* ---------- büyük kapak görseli — "kitap kapağı" ---------- */
.cover{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px -30px rgba(20,20,30,.25); margin-bottom:28px;}
.cover-frame__bar{display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--bg-soft); border-bottom:1px solid var(--line);}
.cf-dot{width:8px; height:8px; border-radius:50%;}
.cf-dot:nth-child(1){background:#ff8a8a;} .cf-dot:nth-child(2){background:#ffd479;} .cf-dot:nth-child(3){background:#8fe3b0;}
.cf-url{margin-left:8px; font-size:11px; color:var(--muted-soft); background:var(--white); border:1px solid var(--line); border-radius:6px; padding:3px 10px; font-weight:600;}
.cover img{width:100%; display:block; max-height:480px; object-fit:cover;}
.cover-badges{position:absolute; top:54px; left:18px; display:flex; gap:8px;}
.cv-badge{font-size:11px; font-weight:800; padding:6px 12px; border-radius:999px; display:flex; align-items:center; gap:6px;}
.cv-badge.live{background:var(--white); color:var(--ink); box-shadow:0 8px 16px -4px rgba(0,0,0,.2);}
.cv-badge.live .dot{width:6px; height:6px; border-radius:50%; background:var(--green);}
.cv-badge.cat{background:var(--ink); color:#fff;}

/* ---------- başlık + iki büyük, dikkat çekici buton ---------- */
.title-row{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:36px; flex-wrap:wrap;}
.title-row h1{font-size:32px; font-weight:900; margin:0 0 8px; letter-spacing:-.01em;}
.tagline{font-size:15px; color:var(--muted); max-width:520px; line-height:1.6; margin:0; font-weight:500;}
.title-actions{display:flex; gap:14px; flex-shrink:0;}
.ta-btn{padding:19px 30px; border-radius:14px; font-weight:800; font-size:15.5px; border:none; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:9px; transition:.2s; text-decoration:none;}
.ta-btn.demo{background:linear-gradient(135deg,var(--indigo),#9d6dff); color:#fff; box-shadow:0 16px 32px -10px rgba(108,79,224,.55);}
.ta-btn.demo:hover{transform:translateY(-2px); box-shadow:0 22px 40px -10px rgba(108,79,224,.65);}
.ta-btn.panel{background:linear-gradient(135deg,#ff6f8e,#ff9a5a); color:#fff; box-shadow:0 16px 32px -10px rgba(255,111,142,.5);}
.ta-btn.panel:hover{transform:translateY(-2px); box-shadow:0 22px 40px -10px rgba(255,111,142,.6);}

/* ---------- kitap düzeni: geniş okuma sütunu + sabit yan not ---------- */
.book{display:grid; grid-template-columns:1.6fr 1fr; gap:56px; padding-bottom:60px;}
.read-col h2{font-size:17px; font-weight:800; margin:36px 0 14px;}
.read-col h2:first-child{margin-top:0;}
.read-p{font-size:15px; color:var(--muted); line-height:1.75; margin:0; font-weight:500;}
.check-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.check-list li{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--muted); font-weight:500; line-height:1.5;}
.check-list li svg{color:var(--green); flex-shrink:0; margin-top:2px;}

/* ---------- ekran görüntüleri — kaydırmalı + modal ---------- */
.shot-gallery{position:relative;}
.shot-track{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
.shot-track::-webkit-scrollbar{height:6px;}
.shot-track::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
.shot-item{flex:0 0 calc(50% - 7px); scroll-snap-align:start; cursor:pointer;}
.shot-item .shot{border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--bg-soft); height:160px; display:flex; align-items:center; justify-content:center; color:var(--muted-soft); font-size:11px; font-weight:700; transition:.15s;}
.shot-item:hover .shot{box-shadow:0 16px 30px -14px rgba(20,20,30,.3); transform:translateY(-2px);}
.shot-item .shot img{width:100%; height:100%; object-fit:cover; display:block;}
.shot-cap{font-size:11.5px; color:var(--muted-soft); font-weight:700; margin-top:7px; text-align:center;}
.shot-nav{position:absolute; top:70px; width:34px; height:34px; border-radius:50%; background:var(--white); border:1px solid var(--line); box-shadow:0 10px 20px -8px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; color:var(--ink); transition:.15s;}
.shot-nav:hover{background:var(--indigo); color:#fff; border-color:var(--indigo);}
.shot-nav.prev{left:-17px;}
.shot-nav.next{right:-17px;}

.tech-tags{display:flex; gap:8px; flex-wrap:wrap;}
.tech-tag{font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--muted);}

/* ---------- FAQ akordiyon ---------- */
.faq-list{display:flex; flex-direction:column; gap:10px;}
.faq-item{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--white);}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; background:none; border:none; cursor:pointer; font-size:14px; font-weight:700; color:var(--ink); text-align:left;}
.faq-arrow{color:var(--muted-soft); transition:.2s; flex-shrink:0;}
.faq-item.open .faq-arrow{transform:rotate(180deg); color:var(--indigo);}
.faq-a{max-height:0; overflow:hidden; transition:.25s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{margin:0; padding:0 18px 16px; font-size:13.5px; color:var(--muted); line-height:1.65; font-weight:500;}

/* ---------- Yorum formu + listesi ---------- */
.comment-msg{padding:11px 14px; border-radius:10px; font-size:13px; font-weight:700; margin-bottom:14px;}
.comment-msg.is-ok{background:#f0fdf4; border:1px solid #bbf7d0; color:#166534;}
.comment-msg.is-error{background:#fef2f2; border:1px solid #fecaca; color:#dc2626;}
.comment-form{background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:22px;}
.comment-form__row{display:flex; gap:10px; margin-bottom:10px;}
.comment-form__row input{flex:1; padding:11px 13px; border:1px solid var(--line); border-radius:9px; font-size:13.5px; font-family:'Inter',sans-serif; background:var(--white);}
.comment-form textarea{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:9px; font-size:13.5px; font-family:'Inter',sans-serif; background:var(--white); resize:vertical; margin-bottom:10px;}
.comment-honeypot{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.comment-stars{display:flex; gap:4px; margin-bottom:12px;}
.cs-star{font-size:24px; color:#d4d2e0; cursor:pointer; transition:.1s; -webkit-text-stroke:1px #b8b4cc;}
.cs-star.is-on{color:#f5b942; -webkit-text-stroke:1px #d99a1f;}
.cs-star:hover{transform:scale(1.1);}
.comment-submit{background:var(--indigo); color:#fff; border:none; padding:11px 22px; border-radius:9px; font-weight:700; font-size:13.5px; cursor:pointer;}
.comment-submit:hover{background:var(--indigo-deep);}
.comment-submit:disabled{opacity:.6; cursor:default;}
.comment-hint{font-size:11.5px; color:var(--muted-soft); font-weight:600; margin:8px 0 0;}
.comment-list{display:flex; flex-direction:column; gap:12px;}
.comment-card{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--white);}
.comment-card__head{display:flex; align-items:center; gap:9px; margin-bottom:6px; flex-wrap:wrap;}
.comment-card__name{font-weight:800; font-size:13.5px; color:var(--ink);}
.comment-card__stars{color:#f5b942; font-size:12px;}
.comment-card__date{font-size:11.5px; color:var(--muted-soft); font-weight:600; margin-left:auto;}
.comment-card__body{margin:0; font-size:13.5px; color:var(--muted); line-height:1.6; font-weight:500;}

/* ---------- sağ yan not (sticky) ---------- */
.side-note{position:sticky; top:24px; align-self:start;}
.sn-box{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 20px 40px -28px rgba(20,20,30,.18); margin-bottom:18px;}
.sn-price{display:flex; align-items:baseline; gap:6px; margin-bottom:4px;}
.sn-price b{font-size:30px; font-weight:900;}
.sn-price span{font-size:13px; color:var(--muted-soft); font-weight:700;}
.sn-sub{font-size:12px; color:var(--muted-soft); font-weight:600; margin-bottom:18px;}
.sn-btn{display:flex; align-items:center; justify-content:center; gap:7px; width:100%; text-align:center; padding:13px; border-radius:10px; font-weight:700; font-size:14px; border:none; cursor:pointer; margin-bottom:9px; text-decoration:none;}
.sn-btn.buy{background:#1fb855; color:#fff;}
.sn-btn.buy:hover{background:#178a40;}
.sn-btn.share{background:var(--ink); color:#fff; border:none;}
.sn-btn.share:hover{background:#2a2b35; box-shadow:0 8px 18px -8px rgba(19,20,26,.4);}
.sn-info{display:flex; align-items:center; gap:11px; width:100%; background:linear-gradient(135deg,#ece7fb,#f3effc); border:1.5px solid #d8cdf5; border-radius:12px; padding:13px 14px; margin-top:10px; cursor:pointer; text-align:left; transition:.15s;}
.sn-info:hover{border-color:var(--indigo); box-shadow:0 10px 24px -12px rgba(108,79,224,.35);}
.sn-info .ic{width:30px; height:30px; border-radius:9px; background:var(--indigo); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:800; font-size:15px;}
.sn-info .txt{flex:1;}
.sn-info .txt b{display:block; font-size:12.5px; font-weight:800; color:var(--ink);}
.sn-info .txt span{display:block; font-size:11px; color:var(--muted-soft); font-weight:600; margin-top:1px;}
.sn-info .arrow{color:var(--indigo); font-weight:800; flex-shrink:0;}

.sn-specs{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:6px 20px; max-height:330px; overflow-y:auto;}
.sn-specs .row{display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.sn-specs .row:last-child{border-bottom:none;}
.sn-specs .row span{color:var(--muted); font-weight:600;}
.sn-specs .row b{color:var(--ink); font-weight:800;}

/* ---------- Paylaş menüsü + önizleme kartı ---------- */
.share-menu{display:none; position:absolute; bottom:calc(100% + 8px); left:0; right:0; background:var(--white); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 48px -16px rgba(20,20,30,.25); padding:10px; z-index:40; max-height:80vh; overflow-y:auto;}
.share-menu.open-below{bottom:auto; top:calc(100% + 8px);}
.share-menu__label{font-size:10.5px; font-weight:800; color:var(--muted-soft); text-transform:uppercase; letter-spacing:.04em; padding:6px 8px 8px;}
.share-preview{display:block; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:10px; background:var(--white); box-shadow:0 8px 20px -10px rgba(20,20,30,.15);}
.share-preview img{width:100%; height:120px; object-fit:cover; display:block; background:var(--bg-soft);}
.share-preview__txt{padding:10px 12px; background:var(--bg-soft); border-top:1px solid var(--line);}
.share-preview__txt b{font-size:12.5px; font-weight:800; color:var(--ink); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:3px;}
.share-preview__txt span{font-size:10.5px; color:var(--muted-soft); font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
.share-menu.open{display:block;}
.share-menu button{display:flex; align-items:center; gap:11px; width:100%; padding:11px 12px; border:none; background:none; cursor:pointer; font-size:13.5px; font-weight:700; color:var(--ink); border-radius:9px; text-align:left;}
.share-menu button:hover{background:var(--bg-soft);}
.share-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:4px;}
.share-grid button{flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border:1px solid var(--line); border-radius:12px; text-align:center; font-size:11.5px;}
.share-grid button:hover{background:var(--bg-soft); border-color:var(--indigo);}
.share-grid .sm-ic{width:34px; height:34px; font-size:15px;}
.share-menu .sm-ic{width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; font-size:13px;}
.share-grid .sm-ic{border-radius:10px;}

/* ---------- lightbox modal ---------- */
.lightbox{position:fixed; inset:0; z-index:2000; display:none; background:rgba(10,10,15,.88); align-items:center; justify-content:center; padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:85vh; border-radius:10px; box-shadow:0 40px 80px -20px rgba(0,0,0,.6);}
.lightbox__close{position:absolute; top:24px; right:28px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s;}
.lightbox__close:hover{background:rgba(255,255,255,.22);}
.lightbox__hint{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.6); font-size:12px; font-weight:600;}

/* ---------- "nasıl çalışıyor" bilgi kartı ---------- */
.info-pop{display:none; position:fixed; inset:0; z-index:2000; background:rgba(10,10,15,.5); align-items:center; justify-content:center; padding:24px;}
.info-pop.open{display:flex;}
.info-pop__box{background:var(--white); border-radius:18px; padding:30px; max-width:420px; box-shadow:0 40px 80px -20px rgba(0,0,0,.4); position:relative;}
.info-pop__box h4{margin:0 0 4px; font-size:18px; font-weight:800;}
.info-pop__box .ip-sub{margin:0 0 20px; font-size:12.5px; color:var(--muted-soft); font-weight:600;}
.info-pop__close{position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; background:var(--bg-soft); border:none; font-size:15px; cursor:pointer; color:var(--muted);}
.ip-row{display:flex; gap:13px; margin-bottom:18px;}
.ip-row:last-child{margin-bottom:0;}
.ip-row .ip-ic{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; font-size:16px;}
.ip-row .ip-txt b{display:block; font-size:13.5px; font-weight:800; color:var(--ink); margin-bottom:3px;}
.ip-row .ip-txt p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.55; font-weight:500;}

/* ---------- kapanış CTA şeridi ---------- */
.closing-cta{text-align:center; background:var(--white); border:1px solid var(--line); border-radius:20px; padding:42px 30px; margin-bottom:20px;}
.closing-cta h3{margin:0 0 6px; font-size:21px; font-weight:800;}
.closing-cta p{margin:0 0 22px; font-size:14px; color:var(--muted); font-weight:500;}
.closing-cta__btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- yukarı kaydır (her iki sayfada da kullanılır) ---------- */
.back-to-top{position:fixed; bottom:26px; right:26px; width:48px; height:48px; border-radius:50%; background:var(--indigo); color:#fff; border:none; box-shadow:0 16px 30px -10px rgba(108,79,224,.5); cursor:pointer; display:none; align-items:center; justify-content:center; z-index:200; transition:.2s; font-size:18px;}
.back-to-top.show{display:flex;}
.back-to-top:hover{background:var(--indigo-deep); transform:translateY(-2px);}

.mono{font-family:monospace;}

@media (max-width:900px){
  .book{grid-template-columns:1fr;}
  .side-note{position:static;}
}
@media (max-width:600px){
  .title-row{flex-direction:column;}
  .title-actions{width:100%;}
  .ta-btn{flex:1; justify-content:center;}
  .shot-item{flex:0 0 calc(85% - 7px);}
  .closing-cta__btns{flex-direction:column;}
  .closing-cta__btns .ta-btn{width:100%;}
  .cat-nav{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;}
  .cat-drop__btn{flex-shrink:0;}
  .comment-form__row{flex-direction:column;}
}