/* Üç yönün ortak iskeleti. Boşluk ölçeği: 3 · 7 · 12 · 19 · 40 (ve katları 80 · 120). Sağdan sola için mantıksal özellikler. */
@font-face { font-family:Manrope; font-weight:400; font-display:swap; src:url(yazi/manrope_regular.woff2) format("woff2"); }
@font-face { font-family:Manrope; font-weight:700; font-display:swap; src:url(yazi/manrope_bold.woff2) format("woff2"); }
@font-face { font-family:Bricolage; font-weight:700; font-display:swap; src:url(yazi/bricolage_grotesque_bold.woff2) format("woff2"); }
@font-face { font-family:Jakarta; font-weight:400; font-display:swap; src:url(yazi/plus_jakarta_sans_regular.woff2) format("woff2"); }
@font-face { font-family:Jakarta; font-weight:700; font-display:swap; src:url(yazi/plus_jakarta_sans_bold.woff2) format("woff2"); }
:root { --s1:3px; --s2:7px; --s3:12px; --s4:19px; --s5:40px; --s6:80px; --s7:120px; --sistem:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--s6); }
body { margin:0; overflow-x:hidden; background:var(--zemin); color:var(--yazi); font:400 17px/1.6 var(--govde),var(--sistem); }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
h1,h2,h3,p { margin:0; }
ul,ol { margin:0; padding:0; list-style:none; }
.gizli { display:none; }
.kap { width:min(1200px,100% - 2*16px); margin-inline:auto; }
.ik { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hd-isaret { display:block; height:24px; width:auto; flex:none; }

.ust { position:sticky; top:0; z-index:5; background:var(--ust-zemin,var(--zemin)); border-block-end:1px solid var(--cizgi); }
.ust .kap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s3) var(--s5); padding-block:var(--s3); }
.marka { display:flex; align-items:center; gap:var(--s3); font-weight:700; text-decoration:none; }
.marka img { border-radius:var(--s2); }
.menu { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); font-size:15px; }
.menu a { text-decoration:none; }
.menu a:hover { text-decoration:underline; text-underline-offset:var(--s1); }
.dil { display:inline-flex; align-items:center; gap:var(--s1); }

.magazalar { display:flex; flex-wrap:wrap; gap:var(--s3); }
.magaza { display:inline-flex; align-items:center; gap:var(--s2); min-height:48px; padding:var(--s2) var(--s4); border-radius:var(--yuvarlak,12px); font-weight:700; font-size:15px; text-decoration:none; background:var(--dugme-zemin); color:var(--dugme-yazi); }
.magaza.yakinda { background:transparent; color:var(--soluk); border:1px dashed var(--cizgi-guclu,var(--cizgi)); font-weight:400; }
.magaza.yakinda b { padding:var(--s1) var(--s2); border-radius:var(--s2); background:var(--rozet-zemin,var(--cizgi)); color:var(--yazi); font-size:12px; font-weight:700; }
.dugme { display:inline-flex; align-items:center; min-height:48px; padding:var(--s2) var(--s4); border-radius:var(--yuvarlak,12px); border:1px solid currentColor; font-weight:700; text-decoration:none; }

.bilgi { display:grid; gap:var(--s3); }
.bilgi li { display:flex; align-items:flex-start; gap:var(--s3); }
.bilgi .ik { margin-block-start:var(--s1); color:var(--vurgu); }

/* Cihaz kasaları çizimdir (telefon.svg, saat.svg); ekran deliği görüntünün oranına birebir oturur. Yüzdeler SVG ölçülerinden gelir. */
.tel { position:relative; margin:0; aspect-ratio:1184/2488; filter:drop-shadow(0 19px 19px rgba(10,20,30,.28)); }
.tel img { position:absolute; left:4.3919%; top:1.7685%; width:91.2162%; height:96.463%; border-radius:8.9%/4%; background:#111; }
.tel::after { content:""; position:absolute; inset:0; background:url(telefon.svg) center/100% 100% no-repeat; pointer-events:none; }
.saat { position:relative; margin:0 auto; width:min(300px,100%); aspect-ratio:1000/1500; filter:drop-shadow(0 12px 12px rgba(10,20,30,.25)); }
.saat img { position:absolute; left:18%; top:30%; width:60%; height:40%; border-radius:50%; background:#000; }
.saat::after { content:""; position:absolute; inset:0; background:url(saat.svg) center/100% 100% no-repeat; pointer-events:none; }

.tablo-kap { overflow-x:auto; }
.paket { width:100%; min-width:640px; border-collapse:collapse; font-size:15px; }
.paket th,.paket td { padding:var(--s3); text-align:center; border-block-end:1px solid var(--cizgi); }
.paket tbody th { text-align:start; font-weight:400; }
.paket thead th { font-weight:700; font-size:17px; }
.paket .ara th { padding-block-start:var(--s5); text-align:start; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--soluk); }
.paket .ik { display:inline-block; color:var(--vurgu); vertical-align:middle; }
.paket .yok { color:var(--soluk); }
.paket .sonsuz { font-weight:700; }
.not { display:flex; gap:var(--s3); align-items:flex-start; color:var(--soluk); font-size:15px; }
.not .ik { margin-block-start:var(--s1); }

.alt { border-block-start:1px solid var(--cizgi); padding-block:var(--s5); font-size:15px; }
.alt .kap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s4) var(--s5); }
.alt-marka { display:flex; align-items:center; gap:var(--s3); font-weight:700; }
.alt-marka img { border-radius:var(--s2); }
.alt nav { display:flex; flex-wrap:wrap; gap:var(--s4); }
.ust-marka { display:inline-flex; align-items:center; gap:var(--s2); text-decoration:none; }
.ust-marka .hd-isaret { height:14px; }
.kunye { color:var(--soluk); }

@media (max-width:760px) { body { font-size:16px; } }

.dil-sec { position:relative; }
.dil-sec summary { display:flex; align-items:center; gap:var(--s1); cursor:pointer; list-style:none; font-size:15px; }
.dil-sec summary::-webkit-details-marker { display:none; }
.dil-sec nav { position:absolute; inset-inline-end:0; z-index:6; display:grid; gap:var(--s1); min-width:230px; max-height:70vh; overflow:auto; margin-block-start:var(--s2); padding:var(--s3); background:var(--zemin); border:1px solid var(--cizgi-guclu,var(--cizgi)); border-radius:var(--s3); }
.dil-sec nav a { padding:var(--s1) var(--s2); text-decoration:none; }
.dil-sec nav a[aria-current] { font-weight:700; color:var(--vurgu); }
.belge { width:min(760px,100% - 2*16px); margin-inline:auto; padding-block:var(--s5) var(--s6); }
.belge h1 { margin-block-end:var(--s4); font-size:clamp(32px,4.4vw,52px); }
.belge h2 { margin-block:var(--s5) var(--s3); font-size:24px; line-height:1.2; }
.belge p,.belge ul { margin-block-end:var(--s3); }
.belge ul { list-style:disc; padding-inline-start:var(--s4); }
.belge table { width:100%; border-collapse:collapse; font-size:15px; }
.belge th,.belge td { padding:var(--s2) var(--s3); border:1px solid var(--cizgi); text-align:start; }
.dil-kok { display:grid; gap:var(--s4); width:min(760px,100% - 2*16px); margin-inline:auto; padding-block:var(--s6); }
.dil-kok h1 { font-size:clamp(32px,5vw,56px); }
.dil-kok ul { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--s2) var(--s4); }
.dil-kok .hd-isaret { height:40px; }

.galeri-bolum { padding-block:var(--s5); }
.galeri-bolum h2 { margin-block-end:var(--s4); }
.galeri { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,260px); gap:var(--s5); overflow-x:auto; scroll-snap-type:x proximity; padding-block:var(--s3) var(--s4); padding-inline:var(--s1); }
.galeri li { display:grid; gap:var(--s3); align-content:start; scroll-snap-align:start; }
.galeri .tel { margin-block-end:var(--s2); }
.galeri h3 { font-size:19px; line-height:1.2; }
.galeri p { font-size:15px; color:var(--soluk); }
.pk-bolum { display:grid; gap:var(--s3); padding-block-start:var(--s4); border-block-start:1px solid var(--cizgi); }
.pk-bolum>h3 { font-size:28px; line-height:1.1; }
/* Almanca, Rusça gibi dillerde uzun kelimeler telefonda kutuyu taşırmasın. */
body { overflow-wrap:break-word; }
h1,h2,h3,p,li,span,td,th { hyphens:auto; }
.magaza,.marka,.menu a { hyphens:none; }

@media (max-width:760px) {
  .tablo-kap.tablo-kap { padding-inline:0; }
  .paket { min-width:520px; font-size:14px; }
  .paket .ara th span { display:inline-block; position:sticky; inset-inline-start:var(--s2); }
  .paket th,.paket td { padding:var(--s2); }
  .paket tbody th[scope="row"],.paket thead td { position:sticky; inset-inline-start:0; z-index:1; width:136px; background:var(--tablo-zemin,var(--zemin)); }
}

/* Kesit: telefon çerçevesiz, işin geçtiği bölüm. */
.kesit { margin:0; overflow:hidden; border-radius:var(--s4); background:#fff; border:1px solid var(--cizgi); box-shadow:0 19px 40px -19px rgba(10,20,30,.28); }
.kesit img { display:block; width:100%; height:auto; }
.kesit.solan { border-block-end:0; border-end-start-radius:0; border-end-end-radius:0; -webkit-mask-image:linear-gradient(#000 80%,transparent); mask-image:linear-gradient(#000 80%,transparent); box-shadow:none; }
/* Sahne: bir telefon, önüne taşan bir kesit. */
.sahne.sahne { position:relative; display:block; margin:0; padding:0; }
.sahne .tel { width:56%; max-width:300px; margin-inline:0; flex:none; }
.sahne .kesit { position:absolute; inset-inline-end:0; inset-block-end:12%; width:48%; max-width:320px; }
/* Bento: farklı boylarda, yazı ve kesit bir arada. */
.bento { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s4); }
.bento li { grid-column:span 6; display:grid; align-content:space-between; gap:var(--s4); overflow:hidden; padding:var(--s5) var(--s5) 0; border-radius:var(--s5); background:var(--panel-1,var(--rozet-zemin)); }
.bento li:nth-child(4n+1),.bento li:nth-child(4n) { grid-column:span 7; }
.bento li:nth-child(4n+2),.bento li:nth-child(4n+3) { grid-column:span 5; }
.bento li:nth-child(2) { background:var(--panel-2,var(--rozet-zemin)); }
.bento li:nth-child(3) { background:var(--panel-3,var(--rozet-zemin)); }
.bento li:nth-child(4) { background:var(--panel-4,var(--rozet-zemin)); }
.bento h3 { font-size:clamp(22px,2.4vw,30px); line-height:1.15; }
.bento p { color:var(--soluk); }
.bento .bento-metin { display:grid; gap:var(--s2); padding-block-end:var(--s3); }
.bento .kesit { margin-block-end:0; }
/* İletişim */
.iletisim { padding-block:var(--s6); }
.iletisim h1 { font-size:clamp(36px,5vw,64px); line-height:1.05; margin-block-end:var(--s3); }
.iletisim h2 { font-size:24px; margin-block:var(--s5) var(--s4); }
.iletisim .giris { max-width:56ch; }
.kutular { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:var(--s4); margin-block-start:var(--s5); }
.kutu { display:grid; align-content:start; gap:var(--s2); height:100%; padding:var(--s4); border:1px solid var(--cizgi); border-radius:var(--s4); background:var(--kutu-zemin,transparent); text-decoration:none; transition:transform .15s,border-color .15s; }
.kutu:hover,.kutu:focus-visible { transform:translateY(-3px); border-color:var(--vurgu); }
.kutu .ik { width:24px; height:24px; color:var(--vurgu); }
.kutu b { font-size:19px; }
.kutu span { color:var(--soluk); font-size:15px; }
.kanallar { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--s4); margin-block-end:var(--s5); }
.kanallar li { display:flex; gap:var(--s3); align-items:flex-start; }
.kanallar .ik { margin-block-start:var(--s1); color:var(--vurgu); }
.kanallar div { display:grid; gap:var(--s1); min-width:0; }
.kanallar span { color:var(--soluk); font-size:15px; }
.son-cta h2,.tablo-bolum h2,.sss h2 { font-size:clamp(28px,3.6vw,44px); line-height:1.1; }
.tablo-bolum { padding-block:var(--s6) var(--s5); }
.tablo-bolum .kap { display:grid; gap:var(--s4); }
.sss { padding-block:var(--s5); }
.sss-liste { display:grid; gap:var(--s3); margin-block-start:var(--s4); }
.sss details { padding:var(--s4); border:1px solid var(--cizgi); border-radius:var(--s4); }
.sss summary { cursor:pointer; font-weight:700; }
.sss details p { margin-block-start:var(--s3); color:var(--soluk); }
@media (max-width:860px) {
  .bento li,.bento li:nth-child(n) { grid-column:span 12; padding:var(--s4) var(--s4) 0; }
  .sahne .tel { width:min(280px,80%); margin-inline:auto; }
  .sahne .kesit { position:static; width:100%; max-width:none; margin-block-start:var(--s4); }
}