/* =========================================================
   TEKİN MATBAA — TEKLİ ÜRÜN SAYFASI
   ========================================================= */

.urun-alani{padding:10px 0 80px}
.urun-ust{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:44px;align-items:start;
  padding-bottom:40px;border-bottom:1px solid var(--cizgi)}

/* ---------- galeri ---------- */
.urun-galeri{display:flex;flex-direction:column;gap:12px;position:sticky;top:150px}
.ubuyuk{margin:0;background:var(--kagit-2);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:38px;display:grid;place-items:center;aspect-ratio:4/3;position:relative}
.ubuyuk .mockup{filter:drop-shadow(0 16px 30px rgba(20,20,28,.2))}
.ubuyuk figcaption{position:absolute;left:14px;bottom:12px;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--murekkep-60);background:var(--kagit-2);
  border:1px solid var(--cizgi);padding:4px 9px;border-radius:var(--r)}
.ukucukler{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ukucuk{background:var(--kagit-2);border:1px solid var(--cizgi);border-radius:var(--r);padding:10px 8px 8px;
  cursor:pointer;display:flex;flex-direction:column;gap:7px;align-items:center;
  transition:border-color var(--gecis),background var(--gecis)}
.ukucuk .mockup{height:50px}
.ukucuk span{font-size:11px;color:var(--murekkep-60);text-align:center;line-height:1.25}
.ukucuk:hover{border-color:var(--nokta)}
.ukucuk[aria-selected="true"]{border-color:var(--nokta);box-shadow:inset 0 2px 0 var(--nokta)}
.ukucuk[aria-selected="true"] span{color:var(--murekkep);font-weight:600}

/* ---------- sağ bilgi ---------- */
.urozet{font-style:normal;color:var(--nokta)}
.ubaslik{font-size:clamp(30px,4vw,46px);font-weight:800;margin:10px 0 12px}
.uozet{font-size:16.5px;color:var(--murekkep-60);max-width:52ch}
.ukunye{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:24px 0 22px}
.ukunye div{padding:11px 0;border-bottom:1px solid var(--cizgi)}
.ukunye dt{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--murekkep-40)}
.ukunye dd{margin:3px 0 0;font-size:15px;font-weight:500}

.ufiyat{background:var(--murekkep);color:#fff;border-radius:var(--r);overflow:hidden;margin-bottom:20px}
.ufiyat__ust{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #2a2a34;position:relative}
.ufiyat__ust::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--nokta)}
.ufiyat__ust div{padding:18px 20px}
.ufiyat__ust div+div{border-left:1px solid #2a2a34}
.ufiyat__ust span{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#7d7d8c}
.ufiyat__ust b{display:block;font-family:"Archivo",sans-serif;font-size:26px;font-weight:800;
  letter-spacing:-.02em;margin-top:4px}
.ufiyat__adetler{display:flex;flex-wrap:wrap;gap:6px;padding:14px 20px 6px}
.uadet{background:none;border:1px solid #33333f;color:#a2a2b0;border-radius:var(--r);padding:6px 12px;
  cursor:pointer;font-family:"JetBrains Mono",monospace;font-size:12px;transition:all var(--gecis)}
.uadet:hover{border-color:var(--nokta);color:#fff}
.uadet--aktif{background:var(--nokta);border-color:var(--nokta);color:#fff;font-weight:700}
.ufiyat__not{padding:10px 20px 18px;font-size:11.5px;color:#7d7d8c;line-height:1.45}

.udugmeler{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.uguven{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:var(--murekkep-60)}
.uguven li{padding-left:18px;position:relative}
.uguven li::before{content:"✓";position:absolute;left:0;color:var(--nokta);font-weight:700}

/* ---------- sekmeler ---------- */
.urun-govde{padding:34px 0 10px}
.usekmeler{display:flex;gap:0;border-bottom:1px solid var(--cizgi);margin-bottom:26px;overflow-x:auto}
.usekme{background:none;border:0;border-bottom:2px solid transparent;padding:12px 2px;margin-right:26px;
  cursor:pointer;font-size:15px;font-weight:600;color:var(--murekkep-40);white-space:nowrap;
  transition:color var(--gecis),border-color var(--gecis)}
.usekme:hover{color:var(--murekkep)}
.usekme--aktif{color:var(--murekkep);border-bottom-color:var(--nokta)}

.ubolum{max-width:900px;animation:ubolum 200ms ease-out}
@keyframes ubolum{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.ubolum p{color:var(--murekkep-60);font-size:15.5px;margin-bottom:14px;max-width:72ch}
.ubolum h3{font-size:17px;margin-bottom:12px}
.uarabaslik{margin-top:28px}
.uikili{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.uliste div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--cizgi)}
.uliste dt{font-size:13.5px;color:var(--murekkep-40)}
.uliste dd{margin:0;font-size:14.5px;text-align:right}
.uetiketler{display:flex;flex-wrap:wrap;gap:7px}
.uetiketler li{font-size:13px;background:var(--kagit-2);border:1px solid var(--cizgi);border-radius:100px;
  padding:6px 14px;color:var(--murekkep-60)}
.uadimlar{counter-reset:adim;display:grid;gap:12px;max-width:760px}
.uadimlar li{counter-increment:adim;position:relative;padding-left:38px;font-size:15px;color:var(--murekkep-60)}
.uadimlar li::before{content:counter(adim,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;color:var(--nokta)}
.unot{margin-top:20px;padding:14px 16px;background:var(--kagit-2);border-left:3px solid var(--nokta);
  border-radius:0 var(--r) var(--r) 0;font-size:14px}
.usss details{border-bottom:1px solid var(--cizgi)}
.usss summary{cursor:pointer;list-style:none;padding:15px 2px;font-weight:600;font-size:15.5px;display:flex;align-items:center}
.usss summary::-webkit-details-marker{display:none}
.usss summary::after{content:"+";margin-left:auto;color:var(--murekkep-40);font-weight:500}
.usss details[open] summary::after{content:"–"}
.usss p{padding:0 2px 16px;max-width:70ch}

/* ---------- öneriler ---------- */
.oneri-alani{background:var(--kagit-2);border-top:1px solid var(--cizgi);padding:56px 0 60px}
.oneriler{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.okart{display:flex;flex-direction:column;background:var(--kagit);border:1px solid var(--cizgi);
  border-radius:var(--r);overflow:hidden;transition:transform var(--gecis),box-shadow var(--gecis),border-color var(--gecis)}
.okart:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(20,20,28,.45);border-color:var(--nokta)}
.okart__gorsel{background:var(--kagit-2);border-bottom:1px solid var(--cizgi);padding:22px;aspect-ratio:16/10;
  display:grid;place-items:center}
.okart__gorsel .mockup{filter:drop-shadow(0 8px 16px rgba(20,20,28,.14))}
.okart__ic{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.okart__kanal{width:20px;height:20px;border-radius:50%;background:var(--nokta);color:#fff;display:grid;
  place-items:center;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700}
.okart strong{font-family:"Archivo",sans-serif;font-size:18px}
.okart__ozet{font-size:13.5px;color:var(--murekkep-60);flex:1}
.okart__fiyat{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--murekkep-40)}
.okart__link{margin-top:4px;font-weight:600;font-size:13.5px;color:var(--nokta)}

.birlikte{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;padding-top:30px;
  border-top:1px solid var(--cizgi)}
.bkart{display:flex;flex-direction:column;gap:5px;padding:18px 20px;background:var(--kagit);
  border:1px solid var(--cizgi);border-radius:var(--r);transition:border-color var(--gecis),background var(--gecis)}
.bkart:hover{border-color:var(--nokta);background:var(--kagit-2)}
.bkart strong{font-family:"Archivo",sans-serif;font-size:16px}
.bkart span{font-size:13.5px;color:var(--murekkep-60)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .urun-ust{grid-template-columns:1fr;gap:30px}
  .urun-galeri{position:static}
  .oneriler,.birlikte{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .uikili{grid-template-columns:1fr;gap:24px}
  .ukunye{grid-template-columns:1fr}
  .ufiyat__ust{grid-template-columns:1fr}
  .ufiyat__ust div+div{border-left:0;border-top:1px solid #2a2a34}
  .oneriler,.birlikte{grid-template-columns:1fr}
  .ukucukler{grid-template-columns:repeat(2,1fr)}
  .udugmeler .dugme{flex:1;text-align:center}
  .ubuyuk{padding:24px;aspect-ratio:16/11}
}

/* =========================================================
   GÖRSEL YUVASI (fotoğraf gelene kadar)
   ========================================================= */
.gyuva{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:repeating-linear-gradient(45deg,var(--kagit) 0 10px,var(--kagit-2) 10px 20px);
  border:1px dashed var(--cizgi);border-radius:var(--r);color:var(--murekkep-40)}
.gyuva__ikon svg{width:30px;height:30px}
.gyuva__olcu{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;
  background:var(--kagit-2);border:1px solid var(--cizgi);border-radius:100px;padding:3px 10px}
.ukucuk .gyuva{height:50px;border-radius:2px}
.ukucuk .gyuva__ikon svg{width:18px;height:18px}
.okart__gorsel .gyuva{height:100%}
.ubuyuk .gyuva{max-height:100%}

/* =========================================================
   TÜM ÜRÜN SAYFALARI DİZİNİ
   ========================================================= */
.ulistesi{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.ulistesi__grup h3{display:flex;align-items:center;gap:9px;font-size:15px;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--cizgi)}
.ulistesi__kanal{width:20px;height:20px;border-radius:50%;background:var(--nokta);color:#fff;
  display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700}
.ulistesi__grup li a{display:block;padding:8px 0;border-bottom:1px solid var(--cizgi);font-size:14.5px;
  font-weight:600;transition:color var(--gecis)}
.ulistesi__grup li a span{display:block;font-weight:400;font-size:12.5px;color:var(--murekkep-40);margin-top:2px}
.ulistesi__grup li a:hover{color:var(--nokta)}