/* optimacup.com — tek stil dosyası.
   RTL uyumu: yön bağımlı her ölçü mantıksal özellik (inline-start/end) ile yazılır,
   böylece Arapça sayfada ayrı CSS gerekmez. */

:root{
  --kagit:#ffffff; --zemin:#f6f7f9; --cizgi:#e3e6ea;
  --metin:#15191e; --soluk:#5b6572;
  --vurgu:#0f6d5c; --vurgu-koyu:#0b5346; --vurgu-soluk:#e7f3f0;
  --golge:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  --yuvarlak:14px;
  --kap:1160px;
}
@media (prefers-color-scheme:dark){
  :root{
    --kagit:#12161b; --zemin:#0d1116; --cizgi:#242c35;
    --metin:#e9edf2; --soluk:#9aa6b4;
    --vurgu:#3fbfa3; --vurgu-koyu:#2fa189; --vurgu-soluk:#12302a;
    --golge:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--zemin); color:var(--metin);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Naskh Arabic",sans-serif;
}
h1,h2,h3{line-height:1.25; margin:0 0 .5em; font-weight:650; letter-spacing:-.01em}
h1{font-size:clamp(1.75rem,1.2rem + 2vw,2.6rem)}
h2{font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem)}
p{margin:0 0 1em}
a{color:var(--vurgu); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}

.kap{width:min(100% - 2.5rem,var(--kap)); margin-inline:auto}
.bolum{padding-block:clamp(2rem,1.4rem + 2vw,3.5rem)}
.dar{max-width:820px}
.orta{text-align:center}
.giris{font-size:1.08rem; color:var(--soluk); max-width:70ch}
.kucuk{font-size:.86rem; color:var(--soluk)}
.bos{color:var(--soluk); padding:2rem 0}

.atla{position:absolute; inset-inline-start:-9999px}
.atla:focus{inset-inline-start:1rem; top:1rem; background:var(--kagit); padding:.6rem 1rem; border-radius:8px; z-index:50}

/* ── üst ─────────────────────────────────────────────── */
.ust{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--kagit) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--cizgi)}
.ust-ic{display:flex; align-items:center; gap:1.25rem; min-height:92px}
.marka{display:flex; align-items:center; gap:.6rem; line-height:1.15; color:var(--metin)}
.marka-logo{width:72px; height:72px; border-radius:50%; flex:none}
.marka-yazi{display:flex; flex-direction:column}
.marka:hover{text-decoration:none}
.marka-ad{font-weight:700; font-size:1.4rem; letter-spacing:-.02em}
.marka-alt{font-size:.82rem; color:var(--soluk)}
.gezinti{margin-inline-start:auto; display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap}
.gezinti a{color:var(--metin); font-size:.95rem}
.gezinti a:hover{color:var(--vurgu); text-decoration:none}

.menu-dugme{display:none}

/* dil seçici */
.dil-secici{position:relative}
.dil-dugme{background:transparent; border:1px solid var(--cizgi); color:var(--metin);
  padding:.4rem .75rem; border-radius:999px; font:inherit; font-size:.9rem; cursor:pointer}
.dil-dugme:hover{border-color:var(--vurgu); color:var(--vurgu)}
.dil-liste{position:absolute; inset-inline-end:0; top:calc(100% + .5rem); margin:0; padding:.35rem;
  list-style:none; background:var(--kagit); border:1px solid var(--cizgi); border-radius:12px;
  box-shadow:var(--golge); min-width:170px}
.dil-liste a{display:block; padding:.45rem .7rem; border-radius:8px; color:var(--metin); font-size:.92rem}
.dil-liste a:hover{background:var(--vurgu-soluk); text-decoration:none}
.dil-liste a.etkin{color:var(--vurgu); font-weight:600}

/* ── düğmeler ────────────────────────────────────────── */
.dugme{display:inline-block; background:var(--vurgu); color:#fff; padding:.8rem 1.4rem;
  border-radius:999px; font-weight:600; border:1px solid var(--vurgu); cursor:pointer; font-size:.98rem}
.dugme:hover{background:var(--vurgu-koyu); border-color:var(--vurgu-koyu); text-decoration:none; color:#fff}
.dugme-cizgi{background:transparent; color:var(--vurgu)}
.dugme-cizgi:hover{background:var(--vurgu-soluk); color:var(--vurgu-koyu)}
.dugme-ters{background:#fff; color:var(--vurgu-koyu); border-color:#fff}
.dugme-ters:hover{background:#eef7f4; color:var(--vurgu-koyu); border-color:#eef7f4}
.dugme-kucuk{padding:.5rem 1rem; font-size:.9rem}

/* ── tepe alanı ──────────────────────────────────────── */
.tepe{background:linear-gradient(160deg,var(--vurgu-soluk),transparent 70%); border-bottom:1px solid var(--cizgi)}
.tepe-ic{padding-block:clamp(2.5rem,1.5rem + 4vw,5rem)}
.tepe-metin{max-width:60ch}
.tepe-etiket{text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:700; color:var(--vurgu)}
.tepe-ozet{font-size:1.1rem; color:var(--soluk)}
.tepe-dugmeler{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem}

/* ── ızgaralar ───────────────────────────────────────── */
.deger-izgara{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.deger-kart{background:var(--kagit); border:1px solid var(--cizgi); border-radius:var(--yuvarlak); padding:1.35rem}
.deger-kart h2{font-size:1.02rem; margin-bottom:.35rem}
.deger-kart p{margin:0; color:var(--soluk); font-size:.94rem}

.bolum-baslik{margin-bottom:1.25rem}
.bolum-alt{margin-top:1.25rem}
.kart-izgara{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.kart{display:flex; flex-direction:column; background:var(--kagit); border:1px solid var(--cizgi);
  border-radius:var(--yuvarlak); overflow:hidden; color:var(--metin); transition:border-color .15s, transform .15s}
.kart:hover{border-color:var(--vurgu); transform:translateY(-2px); text-decoration:none}
.kart-gorsel{aspect-ratio:1/1; object-fit:cover; width:100%; background:var(--zemin)}
.kart-govde{padding:1rem 1.1rem 1.2rem}
.kart-govde h2,.kart-govde h3{font-size:1.02rem; margin-bottom:.35rem}
.kart-govde p{color:var(--soluk); font-size:.9rem; margin-bottom:.5rem}
.kart-sayi{font-size:.82rem; color:var(--soluk)}
.rozetler{display:flex; gap:.4rem; flex-wrap:wrap}
.rozet{display:inline-block; background:var(--vurgu-soluk); color:var(--vurgu-koyu);
  padding:.2rem .6rem; border-radius:999px; font-size:.78rem; font-weight:600}
.rozet-sade{background:var(--zemin); color:var(--soluk)}
@media (prefers-color-scheme:dark){ .rozet{color:var(--vurgu)} }

/* ── kırıntı + filtre ────────────────────────────────── */
.kirinti{font-size:.86rem; color:var(--soluk); margin-bottom:1rem}
.kirinti span{margin-inline:.35rem}
.filtre{display:flex; gap:.5rem; flex-wrap:wrap; margin:1.25rem 0 1.75rem}
.filtre a{border:1px solid var(--cizgi); padding:.4rem .9rem; border-radius:999px; font-size:.9rem; color:var(--metin)}
.filtre a:hover{border-color:var(--vurgu); color:var(--vurgu); text-decoration:none}

/* ── ürün sayfası ────────────────────────────────────── */
.urun{display:grid; gap:2rem; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start}
@media (max-width:860px){ .urun{grid-template-columns:1fr} }
.urun-gorsel-alan img{border:1px solid var(--cizgi); border-radius:var(--yuvarlak); background:var(--kagit)}
.gorsel-yok{aspect-ratio:1/1; border:1px dashed var(--cizgi); border-radius:var(--yuvarlak); background:var(--kagit)}
.galeri{display:flex; gap:.6rem; margin-top:.75rem; flex-wrap:wrap}
.galeri img{width:84px; height:84px; object-fit:cover; border-radius:10px; border:1px solid var(--cizgi)}
.ozellik-tablo{width:100%; border-collapse:collapse; margin:.5rem 0 1.5rem; font-size:.95rem}
.ozellik-tablo th,.ozellik-tablo td{text-align:start; padding:.6rem .2rem; border-bottom:1px solid var(--cizgi)}
.ozellik-tablo th{color:var(--soluk); font-weight:500; width:52%}
.alt-baslik{font-size:1.05rem; margin-top:1.5rem}
.teklif-kutu{background:var(--vurgu-soluk); border:1px solid var(--cizgi); border-radius:var(--yuvarlak);
  padding:1.25rem; margin-top:1.5rem}
.teklif-kutu p{margin-bottom:.9rem; color:var(--metin)}
.urun-aciklama{max-width:75ch; margin-top:2.5rem}

/* ── şerit ───────────────────────────────────────────── */
.serit{background:var(--vurgu-koyu); color:#fff; margin-top:1rem}
.serit-ic{padding-block:clamp(2rem,1.4rem + 2vw,3rem); text-align:center}
.serit h2{color:#fff}
.serit p{color:#d9ece7; max-width:62ch; margin-inline:auto; margin-bottom:1.4rem}

/* ── form ────────────────────────────────────────────── */
.form{background:var(--kagit); border:1px solid var(--cizgi); border-radius:var(--yuvarlak); padding:1.5rem; margin-top:1.5rem}
.form-satir{display:grid; gap:1rem; grid-template-columns:1fr 1fr}
@media (max-width:640px){ .form-satir{grid-template-columns:1fr} }
.form label{display:block; margin-bottom:1rem}
.form label span{display:block; font-size:.88rem; color:var(--soluk); margin-bottom:.35rem}
.form input,.form select,.form textarea{
  width:100%; padding:.7rem .85rem; border:1px solid var(--cizgi); border-radius:10px;
  background:var(--zemin); color:var(--metin); font:inherit}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--vurgu); outline-offset:1px; border-color:var(--vurgu)}
.tuzak{position:absolute; inset-inline-start:-9999px; height:0; overflow:hidden}
.bildirim{border-radius:var(--yuvarlak); padding:1.1rem 1.25rem; margin-top:1.25rem; border:1px solid var(--cizgi)}
.bildirim.basarili{background:var(--vurgu-soluk)}
.bildirim.hata{background:#fdeeee; border-color:#f3c6c6; color:#7a1f1f}
.bildirim ul{margin:0; padding-inline-start:1.1rem}

/* ── iletişim ────────────────────────────────────────── */
.iletisim-izgara{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:1.5rem 0}
.iletisim-kart{background:var(--kagit); border:1px solid var(--cizgi); border-radius:var(--yuvarlak); padding:1.25rem}
.iletisim-kart h2{font-size:.9rem; color:var(--soluk); font-weight:500; margin-bottom:.35rem}

/* ── metin sayfası ───────────────────────────────────── */
.metin{max-width:72ch}
.metin h2{margin-top:2rem}
.metin ul,.metin ol{padding-inline-start:1.3rem}

/* ── alt ─────────────────────────────────────────────── */
.alt{background:var(--kagit); border-top:1px solid var(--cizgi); margin-top:2rem}
.alt-ic{display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); padding-block:2.5rem}
.alt-baslik{font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; color:var(--soluk); margin-bottom:.75rem}
.alt-ozet{color:var(--soluk); font-size:.92rem; max-width:36ch}
.alt-liste{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.alt-liste a{color:var(--metin); font-size:.93rem}
.alt-liste a:hover{color:var(--vurgu)}
.alt-diller{grid-template-columns:1fr 1fr}
.alt-serit{border-top:1px solid var(--cizgi); padding-block:1.1rem; font-size:.85rem; color:var(--soluk)}

/* ── mobil menü ──────────────────────────────────────── */
@media (max-width:900px){
  .marka-logo{width:58px; height:58px}
  .ust-ic{min-height:76px}
  .menu-dugme{display:block; margin-inline-start:auto; width:42px; height:38px; border:1px solid var(--cizgi);
    border-radius:10px; position:relative; cursor:pointer}
  .menu-dugme span,.menu-dugme span::before,.menu-dugme span::after{
    content:""; position:absolute; inset-inline-start:10px; width:20px; height:2px; background:var(--metin)}
  .menu-dugme span{top:18px}
  .menu-dugme span::before{top:-6px; inset-inline-start:0}
  .menu-dugme span::after{top:6px; inset-inline-start:0}
  .gezinti{display:none; width:100%; flex-direction:column; align-items:flex-start; gap:.85rem;
    padding:1rem 0 1.25rem; border-top:1px solid var(--cizgi); margin-inline-start:0}
  .menu-kutu:checked ~ .gezinti{display:flex}
  .ust-ic{flex-wrap:wrap}
  .dil-liste{inset-inline-start:0; inset-inline-end:auto}
}