/* Ocean Satış Noktaları — mobil öncelikli, responsive tasarım. */
.oceansn{
  --teal:#2c96b0; --teal-d:#1f7a90; --ink:#10384a; --muted:#5c7a89;
  --line:#e6eef2; --bg:#f6fafb; --card:#ffffff;
  --radius:14px; --shadow:0 1px 3px rgba(16,56,74,.08),0 6px 20px rgba(16,56,74,.06);
  max-width:1180px; margin:0 auto; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}
.oceansn *{ box-sizing:border-box; }

/* Araç çubuğu — kart, mobilde yapışkan */
.oceansn-toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; justify-content:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px; margin-bottom:12px;
  position:sticky; top:8px; z-index:5;
}
.oceansn-field{ display:flex; flex-direction:column; gap:6px; flex:0 0 auto; width:200px; min-width:160px; }
.oceansn-field label{ font-size:12px; font-weight:800; color:var(--ink); letter-spacing:.04em; text-transform:uppercase; opacity:.75; }
.oceansn-field select,
.oceansn-field input{
  width:100%; height:46px; border:1px solid var(--line); border-radius:10px;
  padding:0 12px; font-size:15px; background:#fff; color:var(--ink); appearance:none;
  transition:border-color .15s, box-shadow .15s;
}
.oceansn-field select:focus,
.oceansn-field input:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(44,150,176,.15);
}
.oceansn-search{ flex:1.5 1 240px; }
.oceansn-locate{
  height:46px; flex:0 0 auto; min-width:200px; display:inline-flex; align-items:center; justify-content:center;
  gap:6px; background:var(--teal); color:#fff; border:0; border-radius:10px; padding:0 16px;
  cursor:pointer; font-size:15px; font-weight:600; transition:background .15s, transform .05s;
}
.oceansn-locate:hover{ background:var(--teal-d); }
.oceansn-locate:active{ transform:translateY(1px); }
.oceansn-locate .material-icons{ font-size:20px; }

/* Sonuç çubuğu */
.oceansn-resultbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 2px 10px; flex-wrap:wrap; }
.oceansn-req-btn{ background:var(--ink,#1f2d3d); color:#fff; border:0; border-radius:10px; padding:10px 16px; font-size:14px; font-weight:700; cursor:pointer; transition:background .15s, transform .05s; }
.oceansn-req-btn:hover{ background:var(--teal,#2c96b0); }
.oceansn-req-btn:active{ transform:translateY(1px); }
.oceansn-count-badge{
  font-size:13px; color:var(--muted); background:var(--bg); border:1px solid var(--line);
  padding:6px 12px; border-radius:999px;
}
.oceansn-count-badge strong{ color:var(--teal-d); }

.oceansn-status{
  background:#eef6f9; border:1px solid #cfe6ee; border-radius:10px;
  padding:11px 14px; margin-bottom:12px; font-size:14px; color:var(--ink);
}

/* Yerleşim — mobilde tek sütun (harita üstte), masaüstünde yan yana */
.oceansn-layout{ display:grid; grid-template-columns:1fr; gap:14px; }
.oceansn-map{
  width:100%; height:320px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:#e9eff2; box-shadow:var(--shadow);
}
.oceansn-list{
  display:flex; flex-direction:column; gap:10px; max-height:none;
}

/* Kartlar */
.oceansn-item{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .05s;
}
.oceansn-item:hover{ border-color:#bfdbe4; box-shadow:var(--shadow); }
.oceansn-item:active{ transform:translateY(1px); }
.oceansn-item-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.oceansn-item-head strong{ font-size:16px; line-height:1.25; }
.oceansn-dist{
  font-size:12px; font-weight:800; color:#fff; background:var(--teal);
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.oceansn-item-sub{ font-size:13px; color:var(--muted); margin-top:3px; }
.oceansn-item-addr{ font-size:13px; color:#33454e; margin-top:6px; line-height:1.45; }
.oceansn-item-actions{ display:flex; gap:8px; margin-top:12px; }
.oceansn-btn{
  flex:1 1 auto; text-align:center; min-height:42px; display:inline-flex; align-items:center;
  justify-content:center; font-size:14px; font-weight:600; padding:0 14px; border-radius:10px;
  border:1px solid var(--line); color:var(--ink); background:#fff; text-decoration:none;
  transition:background .15s, border-color .15s;
}
.oceansn-btn:hover{ background:var(--bg); border-color:#bfdbe4; }
.oceansn-btn-primary{ background:var(--teal); color:#fff; border-color:var(--teal); }
.oceansn-btn-primary:hover{ background:var(--teal-d); border-color:var(--teal-d); }

.oceansn-empty{ padding:32px 16px; text-align:center; color:var(--muted); background:var(--card);
  border:1px dashed var(--line); border-radius:12px; }
.oceansn-iw{ font-size:13px; line-height:1.5; max-width:240px; color:var(--ink); }
.oceansn-iw a{ color:var(--teal-d); font-weight:600; }

/* Liste kaydırma çubuğu (masaüstü) */
.oceansn-list::-webkit-scrollbar{ width:8px; }
.oceansn-list::-webkit-scrollbar-thumb{ background:#cfdde3; border-radius:8px; }

/* Masaüstü: harita solda yapışkan, liste sağda kayar */
@media (min-width:900px){
  .oceansn-toolbar{ position:static; }
  .oceansn-layout{ grid-template-columns:1fr 400px; align-items:start; }
  .oceansn-map{ height:600px; position:sticky; top:16px; }
  .oceansn-list{ max-height:600px; overflow-y:auto; padding-right:4px; }
}

/* Çok küçük ekran: filtre/arama/konum tam genişlik alt alta */
@media (max-width:520px){
  .oceansn-field, .oceansn-locate, .oceansn-search{ flex:1 1 100%; }
}

/* Konum izni modalı */
.oceansn-perm-overlay{position:fixed;inset:0;background:rgba(16,56,74,.55);display:flex;align-items:center;justify-content:center;z-index:99999;padding:16px;}
.oceansn-perm-box{background:#fff;border-radius:16px;max-width:420px;width:100%;padding:24px;text-align:center;box-shadow:0 12px 44px rgba(0,0,0,.28);}
.oceansn-perm-icon{width:56px;height:56px;border-radius:50%;background:#e1f2f6;color:#2c96b0;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.oceansn-perm-icon .material-icons{font-size:30px;}
.oceansn-perm-title{margin:0 0 8px;font-size:18px;color:#10384a;font-weight:700;}
.oceansn-perm-text{margin:0 0 18px;font-size:14px;line-height:1.5;color:#5c7a89;}
.oceansn-perm-actions{display:flex;flex-direction:column;gap:8px;}
.oceansn-perm-btn{min-height:46px;border-radius:10px;border:1px solid #e6eef2;background:#fff;color:#10384a;font-size:15px;font-weight:600;cursor:pointer;}
.oceansn-perm-btn:hover{background:#f6fafb;}
.oceansn-perm-primary{background:#2c96b0;color:#fff;border-color:#2c96b0;}
.oceansn-perm-primary:hover{background:#1f7a90;}
.oceansn-perm-hint{margin-top:12px;font-size:13px;color:#5c7a89;min-height:16px;}

/* --- Marka override: siyah aksan (tema sarısını ez) + buton yazısı dikey ortala --- */
.oceansn .oceansn-locate{
  background:#111 !important; color:#fff !important; border:0 !important;
  height:46px !important; padding:0 16px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important; line-height:1 !important; text-align:center !important; white-space:nowrap !important;
}
.oceansn .oceansn-locate > *{ display:inline-flex !important; align-items:center !important; line-height:1 !important; margin:0 !important; }
.oceansn .oceansn-locate:hover{ background:#000 !important; }
.oceansn .oceansn-locate span,
.oceansn .oceansn-locate .material-icons{ line-height:1 !important; vertical-align:middle !important; }
/* Yol Tarifi butonları siyah */
.oceansn .oceansn-btn-primary{ background:#111 !important; color:#fff !important; border-color:#111 !important; }
.oceansn .oceansn-btn-primary:hover{ background:#000 !important; border-color:#000 !important; }
/* km mesafe rozeti siyah */
.oceansn .oceansn-dist{ background:#111 !important; color:#fff !important; }